@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  overflow: hidden;
}

.wh-full {
  @apply w-full h-full;
}

.flex-center {
  @apply flex justify-center items-center;
}

.flex-col-center {
  @apply flex flex-col justify-center items-center;
}

.flex-x-center {
  @apply flex justify-center;
}

.flex-y-center {
  @apply flex items-center;
}

.i-flex-center {
  @apply inline-flex justify-center items-center;
}

.i-flex-x-center {
  @apply inline-flex justify-center;
}

.i-flex-y-center {
  @apply inline-flex items-center;
}

.flex-1-hidden {
  @apply flex-1 overflow-hidden;
}

.absolute-lt, .absolute-tl {
  @apply absolute left-0 top-0;
}

.absolute-lb, .absolute-bl {
  @apply absolute left-0 bottom-0;
}

.absolute-rt, .absolute-tr {
  @apply absolute right-0 top-0;
}

.absolute-rb, .absolute-br {
  @apply absolute right-0 bottom-0;
}

.absolute-center {
  @apply absolute left-0 top-0 flex justify-center items-center w-full h-full;
}

.fixed-lt, .fixed-tl {
  @apply fixed left-0 top-0;
}

.fixed-lb, .fixed-bl {
  @apply fixed left-0 bottom-0;
}

.fixed-rt, .fixed-tr {
  @apply fixed right-0 top-0;
}

.fixed-rb, .fixed-br {
  @apply fixed right-0 bottom-0;
}

.fixed-center {
  @apply fixed left-0 top-0 flex justify-center items-center w-full h-full;
}

.nowrap-hidden {
  @apply whitespace-nowrap overflow-hidden;
}

.ellipsis-text {
  @apply whitespace-nowrap overflow-hidden text-ellipsis;
}

.transition-base {
  @apply transition-all duration-300 ease-in-out;
}

.grid-column-2 {
  @apply grid grid-cols-2;
}

.grid-column-3 {
  @apply grid grid-cols-3;
}

.grid-column-4 {
  @apply grid grid-cols-4;
}

.grid-column-5 {
  @apply grid grid-cols-5;
}

.grid-column-6 {
  @apply grid grid-cols-6;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}